<template>
    <div>
      <Canvas id="canvas" width="600" height="300"></Canvas>
      <div>
        <div>
          <label title="id">线条序号(唯一)：</label>
          <input id="id" style="width: 100px">
          <label title="x1">起点x1</label>
          <input id="x1" style="width: 100px">
          <label title="y1">起点y1</label>
          <input id="y1" style="width: 100px">
        </div>
        <div>
          <label title="x2">终点x2</label>
          <input id="x2" style="width: 100px">
          <label title="y2">终点y2</label>
          <input id="y2" style="width: 100px">
        </div>
        <div>
          <h4><button @click="drawline()">画直线</button></h4>
          {{x1}}, {{y1}}, {{x2}}, {{y2}}
        </div>
        <div><h2><button @click="get">显示所有直线</button></h2></div>
        <div>{{getdata}}</div>
        <div><h2><button @click="post">下发本直线</button></h2></div>
        <div>{{postresponse}}</div>
        <div><h2><button @click="deleteone">删除直线(id指定)</button></h2></div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'canvas',
  data () {
    return {
      id: '',
      x1: '',
      y1: '',
      x2: '',
      y2: '',
      getdata: '',
      postresponse: ''
    }
  },
  methods: {
    // 直线功能函数
    drawline: function () {
      // 获取canvas元素(画布)
      var canvas = document.querySelector('#canvas')
      // 获取canvas渲染上下文(画笔)
      var ctx = canvas.getContext('2d')
      this.x1 = document.getElementById('x1').value
      this.y1 = document.getElementById('y1').value
      this.x2 = document.getElementById('x2').value
      this.y2 = document.getElementById('y2').value
      if (!confirm('直线起点x1:  ' + this.x1)) {
        return
      }
      if (!confirm('直线起点y1:  ' + this.y1)) {
        return
      }
      if (!confirm('直线终点x2:  ' + this.x2)) {
        return
      }
      if (!confirm('直线终点y1:  ' + this.y2)) {
        return
      }
      ctx.beginPath()
      ctx.moveTo(this.x1, this.y1)
      ctx.lineTo(this.x2, this.y2)
      ctx.stroke()
      ctx.closePath()
    },
    get: function () {
      let url1 = 'http://localhost:8001/line/showall'
      this.$axios.get(url1).then((resp) => {
        console.log(resp.data)
        this.getdata = resp.data
      }).catch((error) => {
        console.log(error)
      })
    },
    post: function () {
      this.id = document.getElementById('id').value
      this.x1 = document.getElementById('x1').value
      this.y1 = document.getElementById('y1').value
      this.x2 = document.getElementById('x2').value
      this.y2 = document.getElementById('y2').value
      var num = this.$qs.stringify({'id': this.id, 'x1': this.x1, 'y1': this.y1, 'x2': this.x2, 'y2': this.y2})
      let url2 = 'http://localhost:8001/line/insertone'
      this.$axios.post(url2, num).then((response) => {
        console.log(response)
        this.postresponse = response.data
      }).catch((error) => {
        console.log(error)
      })
    },
    deleteone: function () {
      this.id = document.getElementById('id').value
      var num = this.$qs.stringify({'id': this.id})
      let url2 = 'http://localhost:8001/line/deleteone'
      this.$axios.post(url2, num).then((response) => {
        console.log(response)
        this.postresponse = response.data
      }).catch((error) => {
        console.log(error)
      })
    }
  }
}
</script>

<style scoped>
  canvas{
    border: 1px solid red;
  }
</style>
